<template>
   <div>
      <!-- 轮播图 -->
    <div class="p-banner">
      <swiper class="swiper-container"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :pagination="{ clickable: true }"
      :autoplay="{ autoplay: true }"
      loop>
      <swiper-slide><img src="@/assets/img/lyh-p1-1.png" alt=""></swiper-slide>
      <swiper-slide><img src="@/assets/img/lyh-p1-2.png" alt=""></swiper-slide>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"><img src="@/assets/img/lyh-p1-l.png" alt=""></div>
      <div class="swiper-button-next"><img src="@/assets/img/lyh-p1-r.png" alt=""></div>
</swiper>
    </div>
    <!-- 内容 -->
    <div class="p-content p-w1080">
        <h2> 智能手表&nbsp;全能旗舰</h2>
        <div v-for="(item,i) in age" :key="i">
          <div class="p-smartwatch-1" v-show="i !=2 && i !=3" >
            <h2>{{item.name_en}}</h2>
            <h3>{{item.name_ch}}</h3>
            <p>{{item.synopsis}}</p>
            <router-link to="/watch/allsmartwatch">了解更多</router-link>
            <img :src="'http://www.kymid.com/testphp/public'+ item.image" alt="">
        </div>
      </div>
        <div class="p-smartwatch-2 clearfix" >
            <div class="p-smartwatch-2-l fl"  v-for="(item,i) in age" :key="i" v-show="i !=0 && i !=1">
              <h2>{{item.name_en}}</h2>
            <h3>{{item.name_ch}}</h3>
            <p>{{item.synopsis}}</p>
            <router-link to="/watch/allsmartwatch">了解更多</router-link>
            <img :src="'http://www.kymid.com/testphp/public'+ item.image" alt="">
          </div>
          </div>
         <h2> 轻盈时尚&nbsp; 专业运动</h2>
         <div class="p-smartwatch-1"  v-for="(item,i) in age2" :key="i" >
            <h2>{{item.name_en}}</h2>
            <h3>{{item.name_ch}}</h3>
            <p>{{item.synopsis}}</p>
            <router-link to="/watch/allsmartwatch">了解更多</router-link>
            <img :src="'http://www.kymid.com/testphp/public'+ item.image" alt="">
        </div>
        <h2>  蓝牙通话&nbsp; 腕上手机</h2>
       <div class="p-smartwatch-1"  v-for="(item,i) in age1" :key="i" v-show="i !=3 && i !=4" >
            <h2>{{item.name_en}}</h2>
            <h3>{{item.name_ch}}</h3>
            <p>{{item.synopsis}}</p>
            <router-link to="/watch/allsmartwatch">了解更多</router-link>
            <img :src="'http://www.kymid.com/testphp/public'+ item.image" alt="">
        </div>
        <div class="p-smartwatch-2 clearfix" >
            <div class="p-smartwatch-2-l fl"  v-for="(item,i) in age1" :key="i" v-show="i !=0 && i !=1 && i !=2">
              <h2>{{item.name_en}}</h2>
            <h3>{{item.name_ch}}</h3>
            <p>{{item.synopsis}}</p>
            <router-link to="/watch/allsmartwatch">了解更多</router-link>
            <img :src="'http://www.kymid.com/testphp/public'+ item.image" alt="">
          </div>
        </div>
        <h2> 软硬结合&nbsp; 穿戴首选</h2>
      <div class="p-smartwatch-1">
          <h2>运动健康APP</h2>
          <h3>你的运动健康管家</h3>
          <router-link to="/watch/allsmartwatch">了解更多</router-link>
          <img src="@/assets/img/APP.png" alt="">
      </div>
    </div>
   </div>
</template>
<style scoped src="@/assets/css/smartwatch.css"></style>
<style>
.swiper-button-prev{
  margin-left: 100px;
}
.swiper-button-next{
  margin-right: 100px;
}
.swiper-pagination-bullet-active{
  background: var(--swiper-pagination-color, var(--swiper-theme-color)) !important
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{
  background: #fff !important;
}
:root{
  --swiper-theme-color: #fff !important;
}
.p-smartwatch-2-l:last-child{
  margin-left: 30px !important;
}
</style>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { getCurrentInstance, ref } from 'vue'
import 'swiper/swiper-bundle.css'
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay
} from 'swiper'
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])
const { proxy } = getCurrentInstance()
const data = ref([])
const data2 = ref([])
const qc = ref([])
const map = new Map()
const age = ref([])
const age1 = ref([])
const age2 = ref([])

proxy.$http.get('http://www.kymid.com/testphp/public/index.php/api/apis/good_list').then(val => {
   data.value = val.data.msg
    function arrayUnique2 (arr, name) {
            var hash = {}
            return arr.reduce(function (acc, cru, index) {
                if (!hash[cru[name]]) {
                    hash[cru[name]] = { index: index }
                    acc.push(cru)
                } else {
                    acc.splice(hash[cru[name]].index, 1, cru)
                }
                return acc
            }, [])
        }
  data2.value = arrayUnique2(data.value, 'name_en')
   qc.value = data.value.filter(key => !map.has(key.name_ch) && map.set(key.name_ch, 1))
   for (let i = 0; i < qc.value.length - 7; i++) {
    age.value.push(qc.value[i])
   }
   for (let i = 6; i < qc.value.length; i++) {
    age1.value.push(qc.value[i])
   }
    for (let i = 4; i < qc.value.length - 5; i++) {
    age2.value.push(qc.value[i])
   }
   console.log(qc.value)
})
</script>
